<template>
    <Row :gutter="20">
        <Col :span="width == 1920 ? 6 : 8" v-for="(item, i) in attend" :key="i" :style="i==0 ? 'margin-left:-10px;' : ''">
            <Card class="box-card mt10" style="position:relative;">
                <Upload
                    :action="uploadApi"
                    :headers="headers"
                    :show-upload-list="false"
                    :on-success="(res, file) => {
                        onSuccess(res, file, i);
                    }"
                    >
                    <Button icon="ios-cloud-upload-outline">上传</Button> {{item.name ? item.name : '未上传'}}
                </Upload>
                <Input v-model="item.title" placeholder="自定义文件名" class="mt10"></Input>
                <Input v-model="item.tag" placeholder="标签,空格分隔" class="mt10"></Input>
                <Select v-model="item.cate" class="mt10">
                    <Option v-for="r in cate" :key="r" :label="r" :value="r"></Option>
                </Select>
                <Button type="error" shape="circle" icon="md-trash" style="position:absolute;right:20px;top:18px;" @click="remove(i)"></Button>
            </Card>
        </Col>
    </Row>
</template>

<script>
    export default {
        props: ['attend'],
        data() {
            return {
                cate: ['APN','FAQ','Datasheet','应用文档'],
                width: 1920,    //分辨率
                uploadApi: pub.apiDomain + 'index/upload',
                headers: {'Authorization': pub.token()},
            }
        },
        created(){
            let width = window.outerWidth;
            if(width > 1900) {
                this.width = 1920;
            }else if(width > 1400) {
                this.width = 1440;
            }else{
                this.width = 1366;
            }
        },
        methods: {
            //删除段落
            remove(i){
                this.attend.splice(i, 1);
            },
            onSuccess(res, file, index) {
                this.$Message.success('上传成功！');
                this.attend[index].url = res.m;
                this.attend[index].title = file.name;
                this.attend[index].name = file.name;
            },
        }
    }
</script>
<style>
.custom p.title{height:33px!important;line-height: 33px!important;}
.custom p.title .ivu-input-wrapper{width:20%;}
.custom .title .ivu-icon{position:relative;height:28px;line-height:28px;}
.custom .ivu-card-head{padding:7px 16px;}
.custom .ivu-card-extra{top: 7px;}
.mt10{margin-top:10px;}
</style>
